

<!-- 仓库查询展示 -->
<template>
  <view>
 <view class=" top-list-title-gongyi">
       
        <view class=" top-list-title-item-gongyi">
          <view class="top-list-title-item-title-gongyi-left" >
            物料编码：
          </view>
          <view class="top-list-title-item-title-gongyi-right">122542312221</view>
        </view>
        <view class=" top-list-title-item-gongyi">
          <view class="top-list-title-item-title-gongyi-left">
            物料名称：
          </view>
          <view class="top-list-title-item-title-gongyi-right">RBM23223 </view>
        </view>
        <view class=" top-list-title-item-gongyi">
          <view class="top-list-title-item-title-gongyi-left" >
        物料规格：
          </view>
          <view class="top-list-title-item-title-gongyi-right"> 34123 </view>
        </view>
           <view class=" top-list-title-item-gongyi">
          <view class="top-list-title-item-title-gongyi-left" >
            物料批号：
          </view>
          <view class="top-list-title-item-title-gongyi-right"> 34123 </view>
        </view>

      </view>
  </view>
</template>

<script lang="ts" setup>
// 这里可以添加仓库查询的逻辑
import { ref } from 'vue'

</script>

<style scoped>
/* 列表 */
.top-list-title-gongyi {
  padding: 10px 40px;
  margin-bottom: 10px;
  background-color: #fff;
  border-radius: 10px;

}

.top-list-title-item-gongyi {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid #8f8a8a;
  padding: 5px 0px;

}

.top-list-title-item-gongyi-title {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #8f8a8a;
  padding-bottom: 1x;

}

.top-list-title-item-title {
  width: 100%;
}

.top-list-title-item-title-gongyi-left {
 min-width: 80px;
  /* 1. 设置固定宽度（根据最长标题调整） */
  /* padding-right: 30px; */
  /* 2. 标题和内容之间保留间距 */
  white-space: nowrap;
  /* 3. 禁止标题文本换行 */
}

.top-list-title-item-title-gongyi-right {
  width: auto;
}
</style>
